import React, { useContext } from 'react'
import { matchPath } from 'react-router-dom'
import { RouterContext } from '..'

const Route = (props) => {
  console.log('props ===> 12313', props)
  // 使用指定的context
  const context = useContext(RouterContext)

  // 获取 location 对象
  const location = props.location || context.location

  // 是否匹配当前路由
  // 如果父级有switch，就会传入computedMatch来精准匹配渲染此路有
  const match =
    props.computedMatch ||
    (props.path ? matchPath(location.pathname, props) : context.match)

  // 把处理后的数据 props传递给路由组件
  const newRouterProps = { ...context, location, match }

  let { children, component, render } = props

  // 如果子元素是空数组，为了避免渲染出错，将children制空
  if (Array.isArray(children) && children.length === 0) children = null

  let renderChildren = null

  // 如果匹配到了
  if (newRouterProps.match) {
    // 权重关系 children > component > render
    if (children) {
      // 当router有children
      // 如果children是函数，就执行他，并传入props
      // 否则直接使用
      renderChildren =
        typeof children === 'function' ? children(newRouterProps) : children
    } else if (component) {
      // 如果存在 component 属性, 九江 newRouterProps 嵌入到 componet 中
      renderChildren = React.createElement(component, newRouterProps)
    } else if (render) {
      // 如果存在 render 自定义渲染，就把 newRouterProps 通过 props传递给自定义render
      renderChildren = render(newRouterProps)
    }
  }

  return (
    <RouterContext.Provider value={newRouterProps}>
      {renderChildren}
    </RouterContext.Provider>
  )
}

export default Route
